<?php
/**
 * FAQ常见问题组件
 * 支持分类筛选、搜索、折叠展开等功能，可通过questions字段自定义问答数据
 */
$configKey = isset($configKey) ? $configKey : 'faq';

// 页面文本配置（统一管理可复用文本）
$texts = [
    'search_placeholder' => '搜索问题或关键词...',
    'all_questions' => '全部问题',
    'no_results_title' => '未找到相关问题',
    'no_results_desc' => '请尝试使用其他关键词搜索，或联系我们获取帮助',
    'more_help' => '还有其他问题？我们很乐意为您提供帮助',
    'contact_support' => '联系客服'
];

// 默认配置（保留questions字段，支持通过customConfig覆盖自定义）
$defaultConfig = [
    'section_id' => $configKey . '-section', // 组件唯一ID（结合configKey避免冲突）
    'section_pretitle' => '常见问题',
    'section_title' => '您可能想了解的问题',
    'section_subtitle' => '我们收集了用户最常咨询的问题及解答，帮助您快速解决疑惑',
    'bg_color' => 'gray-50', // 背景色（支持Tailwind颜色值）
    'card_style' => 'modern', // 卡片样式：modern(现代)、classic(经典)、minimal(极简)
    'texts' => $texts, // 引入统一文本配置
    
    // 分类配置（含图标、强调色等样式信息）
    'categories' => [
        'general' => [
            'id' => 'general',
            'title' => '基本使用',
            'icon' => 'fa-question-circle', // Font Awesome图标类
            'accent_color' => 'blue-500', // 分类专属强调色
        ],
        'account' => [
            'id' => 'account',
            'title' => '账户相关',
            'icon' => 'fa-user',
            'accent_color' => 'purple-500',
        ],
        'payment' => [
            'id' => 'payment',
            'title' => '支付与账单',
            'icon' => 'fa-credit-card',
            'accent_color' => 'green-500',
            'accent_color_rgba' => 'rgb(34, 197, 94, 0.1)'
        ],
        'technical' => [
            'id' => 'technical',
            'title' => '技术支持',
            'icon' => 'fa-cogs',
            'accent_color' => 'orange-500',
            'accent_color_rgba' => 'rgb(249, 115, 22, 0.1)'
        ]
    ],
    
    // 核心：questions字段（不可删除，支持通过array_merge自定义数据）
    'questions' => [
        [
            'id' => 1,
            'category' => 'general', // 关联分类ID
            'question' => '如何开始使用您的服务？',
            'answer' => '注册账号后，您可以通过我们的网站或移动应用开始使用服务。首次登录后，系统会引导您完成基本设置，您也可以查看我们的新手教程了解更多功能使用方法。整个过程通常不超过5分钟。'
        ],
        [
            'id' => 2,
            'category' => 'general',
            'question' => '服务是否有使用时间限制？',
            'answer' => '我们的基础服务可以24小时全天候使用，部分高级功能可能有特定的维护时段，我们会提前在官网公告栏发布维护通知。如有紧急情况导致服务中断，我们也会通过短信或邮件通知已认证用户。'
        ],
        [
            'id' => 3,
            'category' => 'account',
            'question' => '如何修改我的账户信息？',
            'answer' => '登录后，点击右上角头像进入"个人中心"，选择"账户设置"即可修改个人信息。请注意，修改手机号码或邮箱需要进行验证，以确保账户安全。修改后，您的新信息将立即生效。'
        ],
        [
            'id' => 4,
            'category' => 'account',
            'question' => '忘记密码该怎么办？',
            'answer' => '在登录页面点击"忘记密码"，输入您注册时使用的邮箱或手机号，我们会发送验证码给您。验证通过后，您可以设置新密码。为了安全起见，新密码不能与最近3次使用的密码相同。'
        ],
        [
            'id' => 5,
            'category' => 'payment',
            'question' => '支持哪些支付方式？',
            'answer' => '我们支持微信支付、支付宝、银联卡等多种支付方式。企业用户还可以选择对公转账。所有支付信息均经过加密处理，保障您的资金安全。付款后，系统会自动发送电子发票到您的注册邮箱。'
        ],
        [
            'id' => 6,
            'category' => 'payment',
            'question' => '如何申请退款？',
            'answer' => '如符合退款条件，您可以在"我的订单"中找到相应订单，点击"申请退款"并填写原因。我们会在1-3个工作日内审核您的申请，审核通过后，退款将按原支付路径返还，到账时间取决于支付方式，通常为1-7个工作日。'
        ],
        [
            'id' => 7,
            'category' => 'technical',
            'question' => '遇到功能无法使用怎么办？',
            'answer' => '首先请尝试刷新页面或重新登录，如果问题依然存在，建议清除浏览器缓存或更换浏览器尝试。您也可以查看我们的"系统状态"页面，确认是否有服务异常。如问题持续，请联系我们的技术支持并提供相关截图。'
        ],
        [
            'id' => 8,
            'category' => 'technical',
            'question' => '是否支持移动端访问？',
            'answer' => '是的，我们的服务完全支持移动端访问，您可以通过手机浏览器访问我们的网站，也可以下载我们的移动应用（支持iOS和Android系统）。移动端与桌面端功能一致，并且针对触控操作进行了优化。'
        ]
    ],
    
    // 交互相关配置（可自定义）
    'interaction' => [
        'search_enabled' => true, // 是否启用搜索功能
        'category_filter_enabled' => true, // 是否启用分类筛选
        'collapse_animation' => true, // 是否启用折叠动画
        'scroll_animation' => true, // 是否启用滚动渐入动画
        'animation_delay' => 0.05, // 滚动动画延迟间隔（秒）
        'contact_url' => '/contact.php' // 联系客服链接
    ]
];

// 获取页面传入的自定义配置（优先级：页面配置 > 默认配置，可覆盖questions等所有字段）
$customConfig = $pageConfig['components']['faq'] ?? [];

// 合并配置：自定义配置（含questions）将覆盖默认配置，未定义项保留默认值
$data = array_merge($defaultConfig, $customConfig);

// 处理样式类（根据配置动态生成，与原逻辑保持一致）
// 1. 背景样式类
$bgClass = "bg-{$data['bg_color']}";

// 2. 卡片样式类（根据card_style生成对应Tailwind类）
$cardBaseClasses = "p-6 rounded-xl transition-all duration-300";
$cardStyles = [
    'modern' => $cardBaseClasses . " bg-white shadow-md hover:shadow-lg",
    'classic' => $cardBaseClasses . " bg-white border border-gray-200",
    'minimal' => $cardBaseClasses . " bg-transparent"
];
$cardClass = $cardStyles[$data['card_style']] ?? $cardStyles['modern'];

// 3. 当前激活的分类（优先从URL参数获取，默认显示"全部"）
$activeCategory = $_GET['category'] ?? 'all';
?>

<!-- FAQ常见问题区域 -->
<section id="<?php echo htmlspecialchars($data['section_id']); ?>" class="<?php echo $bgClass; ?> py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 区域标题（动态读取配置中的标题文本） -->
        <div class="text-center max-w-3xl mx-auto mb-12">
            <?php if (!empty($data['section_pretitle'])): ?>
                <span class="inline-block text-sm font-semibold text-blue-600 uppercase tracking-wider mb-2">
                    <?php echo htmlspecialchars($data['section_pretitle']); ?>
                </span>
            <?php endif; ?>
            
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                <?php echo htmlspecialchars($data['section_title']); ?>
            </h2>
            
            <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-lg text-gray-600">
                    <?php echo htmlspecialchars($data['section_subtitle']); ?>
                </p>
            <?php endif; ?>
        </div>

        <!-- 搜索框（动态读取占位文本，根据配置控制是否显示） -->
        <?php if ($data['interaction']['search_enabled']): ?>
            <div class="max-w-2xl mx-auto mb-12">
                <div class="relative">
                    <input 
                        type="text" 
                        id="faq-search"
                        placeholder="<?php echo htmlspecialchars($data['texts']['search_placeholder']); ?>"
                        class="w-full pl-12 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                    >
                    <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <i class="fa fa-search text-lg"></i>
                    </div>
                </div>
            </div>
        <?php endif; ?>

        <!-- 分类筛选（动态读取分类数据，根据配置控制是否显示） -->
        <?php if ($data['interaction']['category_filter_enabled']): ?>
            <div class="flex flex-wrap justify-center gap-4 mb-12">
                <!-- 全部问题筛选按钮 -->
                <button 
                    type="button" 
                    class="category-filter px-6 py-2 rounded-full font-medium text-sm transition-all duration-300"
                    data-category="all"
                    style="background-color: <?php echo $activeCategory === 'all' ? 'rgb(59, 130, 246, 0.1)' : 'transparent'; ?>;
                           color: <?php echo $activeCategory === 'all' ? 'rgb(59, 130, 246, 1)' : '#718096'; ?>;
                           border: <?php echo $activeCategory === 'all' ? '1px solid rgb(59, 130, 246, 1)' : '1px solid #e2e8f0'; ?>;"
                >
                    <?php echo htmlspecialchars($data['texts']['all_questions']); ?>
                </button>
                
                <!-- 动态渲染分类筛选按钮（从配置的categories读取） -->
                <?php foreach ($data['categories'] as $category): ?>
                    <button 
                        type="button" 
                        class="category-filter px-6 py-2 rounded-full font-medium text-sm transition-all duration-300"
                        data-category="<?php echo $category['id']; ?>"
                        style="background-color: <?php echo $activeCategory === $category['id'] ? $category['accent_color_rgba'] : 'transparent'; ?>;
                               color: <?php echo $activeCategory === $category['id'] ? $category['accent_color'] : '#718096'; ?>;
                               border: <?php echo $activeCategory === $category['id'] ? "1px solid {$category['accent_color']}" : '1px solid #e2e8f0'; ?>;"
                    >
                        <i class="fa <?php echo htmlspecialchars($category['icon']); ?> mr-2"></i>
                        <?php echo htmlspecialchars($category['title']); ?>
                    </button>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
        
        <!-- FAQ列表（动态渲染问答数据，从配置的questions读取） -->
        <div class="max-w-3xl mx-auto">
            <div class="space-y-4" id="faq-list">
                <?php foreach ($data['questions'] as $question): ?>
                    <?php 
                    // 动态判断当前问题是否属于激活分类（控制显示/隐藏）
                    $shouldShow = $activeCategory === 'all' || $activeCategory === $question['category'];
                    // 从分类配置中获取当前问题所属分类的样式信息
                    $categoryInfo = $data['categories'][$question['category']] ?? ['accent_color' => 'blue-500', 'icon' => 'fa-question-circle'];
                    ?>
                    
                    <div 
                        class="faq-item <?php echo $cardClass; ?> <?php echo !$shouldShow ? 'hidden' : ''; ?>"
                        data-category="<?php echo $question['category']; ?>"
                        data-question="<?php echo htmlspecialchars(strtolower($question['question'])); ?>"
                    >
                        <button 
                            class="faq-question w-full flex justify-between items-center text-left focus:outline-none"
                            aria-expanded="false"
                            aria-controls="faq-answer-<?php echo $question['id']; ?>"
                        >
                            <span class="font-medium text-gray-900 flex items-center">
                                <!-- 动态显示分类图标与强调色 -->
                                <span class="w-8 h-8 rounded-full bg-<?php echo $categoryInfo['accent_color']; ?>/10 text-<?php echo $categoryInfo['accent_color']; ?> flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fa <?php echo htmlspecialchars($categoryInfo['icon']); ?>"></i>
                                </span>
                                <?php echo htmlspecialchars($question['question']); ?>
                            </span>
                            <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
                        </button>
                        
                        <div 
                            id="faq-answer-<?php echo $question['id']; ?>"
                            class="faq-answer mt-4 pt-4 border-t border-gray-100 hidden"
                        >
                            <p class="text-gray-600 leading-relaxed">
                                <?php echo htmlspecialchars($question['answer']); ?>
                            </p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <!-- 无结果提示（动态读取文本配置） -->
            <div id="no-results" class="text-center py-16 hidden">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-search text-gray-400 text-2xl"></i>
                </div>
                <h3 class="text-xl font-medium text-gray-900 mb-2">
                    <?php echo htmlspecialchars($data['texts']['no_results_title']); ?>
                </h3>
                <p class="text-gray-600">
                    <?php echo htmlspecialchars($data['texts']['no_results_desc']); ?>
                </p>
            </div>
        </div>
        
        <!-- 更多帮助（动态读取文本与链接配置） -->
        <div class="text-center mt-16">
            <p class="text-gray-700 mb-6">
                <?php echo htmlspecialchars($data['texts']['more_help']); ?>
            </p>
            <a 
                href="<?php echo htmlspecialchars($data['interaction']['contact_url']); ?>" 
                class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-all duration-300 shadow hover:shadow-md"
            >
                <i class="fa fa-envelope mr-2"></i>
                <?php echo htmlspecialchars($data['texts']['contact_support']); ?>
            </a>
        </div>
    </div>
</section>

<!-- FAQ交互脚本（根据配置动态控制功能开关） -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 配置参数（从PHP动态传入，控制脚本功能）
    const faqConfig = {
        collapseAnimation: <?php echo $data['interaction']['collapse_animation'] ? 'true' : 'false'; ?>,
        scrollAnimation: <?php echo $data['interaction']['scroll_animation'] ? 'true' : 'false'; ?>,
        animationDelay: <?php echo $data['interaction']['animation_delay']; ?>,
        categories: <?php echo json_encode(array_keys($data['categories'])); ?>, // 分类ID列表
        activeCategory: <?php echo json_encode($activeCategory); ?> // 当前激活分类
    };

    // 1. FAQ折叠功能（根据配置控制是否启用动画）
    const faqQuestions = document.querySelectorAll('.faq-question');
    faqQuestions.forEach(question => {
        question.addEventListener('click', function() {
            const answer = this.nextElementSibling;
            const icon = this.querySelector('.fa-chevron-down');
            const isExpanded = this.getAttribute('aria-expanded') === 'true';
            
            // 切换状态
            this.setAttribute('aria-expanded', !isExpanded);
            answer.classList.toggle('hidden', isExpanded);
            
            // 动画控制（根据配置决定是否执行旋转动画）
            if (faqConfig.collapseAnimation) {
                icon.style.transform = isExpanded ? 'rotate(0deg)' : 'rotate(180deg)';
            }
        });
    });

    // 2. 分类筛选功能（仅在启用分类筛选时执行）
    if (document.querySelectorAll('.category-filter').length > 0) {
        const categoryFilters = document.querySelectorAll('.category-filter');
        const faqItems = document.querySelectorAll('.faq-item');
        const noResults = document.getElementById('no-results');
        
        categoryFilters.forEach(filter => {
            filter.addEventListener('click', function() {
                const category = this.getAttribute('data-category');
                
                // 更新URL参数
                const url = new URL(window.location);
                url.searchParams.set('category', category);
                window.history.pushState({}, '', url);
                
                // 更新筛选按钮样式（动态匹配分类强调色）
                categoryFilters.forEach(btn => {
                    const btnCategory = btn.getAttribute('data-category');
                    const isActive = btnCategory === category;
                    
                    if (btnCategory === 'all') {
                    btn.style.color = isActive ? 'rgb(59, 130, 246, 1)' : '#718096';
                    btn.style.border = isActive ? '1px solid rgb(59, 130, 246, 1)' : '1px solid #e2e8f0';
                } else {
                    // 从页面隐藏元素中获取分类样式信息（避免重复定义）
                    const categoryItem = document.querySelector(`.faq-item[data-category="${btnCategory}"]`);
                    if (categoryItem) {
                        const categoryIcon = categoryItem.querySelector('.fa');
                        const categoryColor = window.getComputedStyle(categoryIcon).color;
                        
                        btn.style.color = isActive ? categoryColor : '#718096';
                        btn.style.border = isActive ? `1px solid ${categoryColor}` : '1px solid #e2e8f0';
                    }
                    }
                });
                
                // 筛选FAQ项目
                let visibleCount = 0;
                faqItems.forEach(item => {
                    const itemCategory = item.getAttribute('data-category');
                    const shouldShow = category === 'all' || itemCategory === category;
                    
                    item.classList.toggle('hidden', !shouldShow);
                    if (shouldShow) visibleCount++;
                    
                    // 折叠所有项目（重置状态）
                    const answer = item.querySelector('.faq-answer');
                    const questionBtn = item.querySelector('.faq-question');
                    const icon = item.querySelector('.fa-chevron-down');
                    
                    if (!answer.classList.contains('hidden')) {
                        answer.classList.add('hidden');
                        questionBtn.setAttribute('aria-expanded', 'false');
                        if (faqConfig.collapseAnimation) {
                            icon.style.transform = 'rotate(0deg)';
                        }
                    }
                });
                
                // 显示或隐藏无结果提示
                noResults.classList.toggle('hidden', visibleCount > 0);
            });
        });
    }

    // 3. 搜索功能（仅在启用搜索时执行）
    const searchInput = document.getElementById('faq-search');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase().trim();
            
            if (searchTerm === '') {
                // 搜索为空时，恢复分类筛选状态
                const activeFilter = document.querySelector(`.category-filter[data-category="${faqConfig.activeCategory}"]`);
                if (activeFilter) activeFilter.click();
                return;
            }
            
            // 执行搜索
            let visibleCount = 0;
            const faqItems = document.querySelectorAll('.faq-item');
            const noResults = document.getElementById('no-results');
            
            faqItems.forEach(item => {
                const questionText = item.getAttribute('data-question');
                const shouldShow = questionText.includes(searchTerm);
                
                item.classList.toggle('hidden', !shouldShow);
                if (shouldShow) visibleCount++;
                
                // 折叠所有项目
                const answer = item.querySelector('.faq-answer');
                const questionBtn = item.querySelector('.faq-question');
                const icon = item.querySelector('.fa-chevron-down');
                
                if (!answer.classList.contains('hidden')) {
                    answer.classList.add('hidden');
                    questionBtn.setAttribute('aria-expanded', 'false');
                    if (faqConfig.collapseAnimation) {
                        icon.style.transform = 'rotate(0deg)';
                    }
                }
            });
            
            // 显示或隐藏无结果提示
            noResults.classList.toggle('hidden', visibleCount > 0);
            
            // 更新分类按钮状态为未选中
            const categoryFilters = document.querySelectorAll('.category-filter');
            categoryFilters.forEach(btn => {
                const btnCategory = btn.getAttribute('data-category');
                
                if (btnCategory === 'all') {
                    btn.style.backgroundColor = 'transparent';
                    btn.style.color = '#718096';
                    btn.style.border = '1px solid #e2e8f0';
                } else {
                    btn.style.backgroundColor = 'transparent';
                    btn.style.color = '#718096';
                    btn.style.border = '1px solid #e2e8f0';
                }
            });
        });
    }

    // 4. 滚动渐入动画（根据配置控制是否启用）
    if (faqConfig.scrollAnimation) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, { threshold: 0.1 });
        
        const faqItems = document.querySelectorAll('.faq-item');
        faqItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(20px)';
            // 动态设置动画延迟（从配置读取）
            item.style.transition = `opacity 0.5s ease ${index * faqConfig.animationDelay}s, transform 0.5s ease ${index * faqConfig.animationDelay}s`;
            observer.observe(item);
        });
    }
});
</script>